import {View} from '@tarojs/components'
import React from 'react'
import {CCard} from '../card'
import {ParamStatusCircle, ParamName} from './paramsCard'
import {DeviceStatusIcon, ParamStatusIcon} from '@/components/images'
import {toEchartsSingleDevParamsAnalyze} from '@/utils/pageRedirect'

const CardTitle: React.FC<{
  devName?: string
  devStatus?: string
}> = ({devName, devStatus}): JSX.Element => {
  return (
    <View className="w-full h-18 mb-12 flex justify-between items-center">
      <View className="text-14 font-medium">{devName || '---'}</View>
      <View className="flex items-center">
        <DeviceStatusIcon
          status="error"
          style={{width: '28rpx', height: '28rpx', marginRight: '14rpx'}}
        ></DeviceStatusIcon>
        <View className="text-13 font-medium">{devStatus || '---'}</View>
      </View>
    </View>
  )
}

const ParamItem: React.FC<{
  paramStatus?: string
  paramName?: string
}> = ({paramStatus, paramName}): JSX.Element => {
  return (
    <View className="flex items-center">
      <ParamStatusIcon
        status={paramStatus as string}
        style={{marginRight: '8rpx'}}
      ></ParamStatusIcon>
      <View className="truncate min-w-27">
        <ParamName name={paramName}></ParamName>
      </View>
    </View>
  )
}

export const SimpleParamsCard: React.FC<{
  info?: Device.SimpleDevDetailData
}> = ({info}): JSX.Element => {
  return (
    <CCard
      title={<CardTitle devName={info?.devName} devStatus={info?.devStatus} />}
      style={{
        width: '100%',
        marginBottom: '20rpx'
      }}
      onClick={() => {
        info && info.devId && toEchartsSingleDevParamsAnalyze(info.devId)
      }}
    >
      {/* <View className="w-full mb-6 grid grid-cols-5 place-content-center"> */}
      <View className="w-full mb-6 flex flex-wrap gap-x-16 gap-y-8">
        {info?.paramList
          .sort((a, b) => b.paramName.length - a.paramName.length)
          .sort((a, b) =>
            /^[a-zA-Z]{1,}$/g.test(a.paramName) &&
            !/^[a-zA-Z]{1,}$/g.test(b.paramName)
              ? 1
              : -1
          )
          .map(item => (
            <ParamItem
              paramName={item.paramName}
              paramStatus={item.paramStatus}
            ></ParamItem>
          ))}
      </View>

      <View className="w-full text-right text-10 text-xxx_text">
        {info?.belongUser}
      </View>
    </CCard>
  )
}
